<div class="totalRows-container">
    <label class="totalRows-label">
        <div class="totalRows-label-left">
            <custom-radio data-custom-ng-model="cycle" data-custom-ng-value="1" data-custom-ng-change="onChange()"></custom-radio>
            <span class="totalRows-cycle" translate-comment="Make sure this string is short please" translate-context="Billing cycle for the dashboard" translate>Pay monthly</span>
            <span
                class="totalRows-discount totalRows-discount-with-vpn"
                pt-tooltip-translate-context="Tooltip"
                pt-tooltip-translate="Monthly subscription with VPN discount">-20%</span>
        </div>
        <div class="totalRows-label-right">
            <div class="totalRows-wrapper">
                <strong class="totalRows-monthly-price"></strong>
                <span translate translate-context="month price">/mo</span>
            </div>
        </div>
    </label>
    <label class="totalRows-label">
        <div class="totalRows-label-left">
            <custom-radio data-custom-ng-model="cycle" data-custom-ng-value="12" data-custom-ng-change="onChange()"></custom-radio>
            <span class="totalRows-cycle" translate-comment="Make sure this string is short please" translate-context="Billing cycle for the dashboard" translate>Pay annually</span>
            <span
                class="totalRows-discount totalRows-discount-without-vpn"
                pt-tooltip-translate-context="Tooltip"
                pt-tooltip-translate="Annual subscription discount">-20%</span>
            <span
                class="totalRows-discount totalRows-discount-with-vpn"
                pt-tooltip-translate-context="Tooltip"
                pt-tooltip-translate="Annual subscription with VPN discount">-36%</span>
        </div>
        <div class="totalRows-label-right">
            <div class="totalRows-wrapper">
                <strong class="totalRows-yearly-price"></strong>
                <span translate translate-context="month price">/mo</span>
            </div>
            <small class="totalRows-yearly-billed-price"></small>
        </div>
    </label>
    <label class="totalRows-label totalRows-label-2-year">
        <div class="totalRows-label-left">
            <custom-radio data-custom-ng-model="cycle" data-custom-ng-value="24" data-custom-ng-change="onChange()"></custom-radio>
            <span class="totalRows-cycle" translate-comment="Make sure this string is short please" translate-context="Billing cycle for the dashboard" translate>2-year plan</span>
            <span
                class="totalRows-discount totalRows-discount-without-vpn"
                pt-tooltip-translate-context="Tooltip"
                pt-tooltip-translate="2-year subscription discount">-33%</span>
            <span
                class="totalRows-discount totalRows-discount-with-vpn"
                pt-tooltip-translate-context="Tooltip"
                pt-tooltip-translate="2-year subscription with VPN discount">-47%</span>
        </div>
        <div class="totalRows-label-right">
            <div class="totalRows-wrapper">
                <strong class="totalRows-2-years-price"></strong>
                <span translate translate-context="month price">/mo</span>
            </div>
            <small class="totalRows-2-years-billed-price"></small>
        </div>
    </label>
</div>
